<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../common/css/amazeui.min.css">
    <link rel="stylesheet" href="../common/css/app.css">
    <link rel="stylesheet" href="../static/css/font.css">
    <link rel="stylesheet" href="../static/css/public.css">
    <link rel="stylesheet" href="../static/css/select.css">
    <script src="../common/js/jquery.js"></script>


</head>
<body>

    <div class="selectPage">
        <!--头部开始-->
        <div class="addClassTop">
            <img src="../static/bImg/bg.png" alt="图片不存在" id="topPic" width="100%">
            <h1>添加分类</h1>
            <a href="javascript:;" class="skip">跳过</a>
        </div>
        <!--头部结束-->
        <!--内容开始-->
        <div class="sContent">
            <div class="smallCon">
                <div class="title">
                    <i class="iconfont iconred">&#xe63d</i>
                    <span>学前教育</span>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">早教</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">幼儿园</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">幼生小</div>
                    </div>
                </div>
            </div>
            <div class="smallCon">
                <div class="title">
                    <i class="iconfont iconpur">&#xe6cd;</i>
                    <span>小学教育</span>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">一年级</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">二年级</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">三年级</div>
                    </div>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">四年级</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">五年级</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">六年级</div>
                    </div>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">小生初</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">全部</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">

                    </div>
                </div>
            </div>

            <div class="smallCon">
                <div class="title">
                    <i class="iconfont iconyel">&#xe6b4;</i>
                    <span>初中教育</span>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">初一</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">初二</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">初三</div>
                    </div>
                </div>
                <div class="am-g doc-am-g">
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">中考</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
                        <div class="kinder">全部</div>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 am-u-lg-4">

                    </div>
                </div>

            </div>
        </div>
        <!--内容结束-->
        <button class="btn">确定</button>
    </div>
    <script>
        $(".addClassTop").css("height",$("#topPic").outerHeight());
        $(".addClassTop h1").css({"height":$("#topPic").outerHeight(),"line-height":$("#topPic").outerHeight()+"px"});
        $(".addClassTop a").css({"height":$("#topPic").outerHeight(),"line-height":$("#topPic").outerHeight()+"px"});

        $(document).ready(function(){
            $(".kinder").click(function(){
                $(this).css({"background":"#ff6700","color":"#fff"});
            });

        });
    </script>
</body>
</html>